<template>
  <div class="editor-container">
    <div id="editor—wrapper">
      <div id="toolbar-container"><!-- 工具栏 --></div>
      <div id="editor-container"><!-- 编辑器 --></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, watch, computed, ref, getCurrentInstance } from 'vue'
import '@wangeditor/editor/dist/css/style.css'
import { createEditor, createToolbar } from '@wangeditor/editor'
import { getToken } from '@/utils/auth'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])
const editor = ref(null)

onMounted(() => {
  const editorConfig = {
    placeholder: '请输入...',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      emit('update:modelValue', html)
    },
    MENU_CONF: {
      uploadImage: {
        server: import.meta.env.VITE_APP_BASE_API + '/common/upload',
        fieldName: 'file',
        maxFileSize: 10 * 1024 * 1024, // 10MB
        maxNumberOfFiles: 10,
        allowedFileTypes: ['image/*'],
        meta: {
          // 请求头
        },
        headers: {
          Authorization: getToken()
        },
        customInsert(res, insertFn) {
          // res 即服务端的返回结果
          if (res.code === 200) {
            // 插入图片到编辑器
            insertFn(res.url, res.fileName, res.url)
          }
        }
      },
      uploadVideo: {
        server: import.meta.env.VITE_APP_BASE_API + '/common/upload',
        fieldName: 'file',
        maxFileSize: 100 * 1024 * 1024, // 100MB
        maxNumberOfFiles: 5,
        allowedFileTypes: ['video/*'],
        meta: {
          // 请求头
        },
        headers: {
          Authorization: getToken()
        },
        customInsert(res, insertFn) {
          // res 即服务端的返回结果
          if (res.code === 200) {
            // 插入视频到编辑器
            insertFn(res.url, res.fileName, res.url)
          }
        }
      }
    }
  }

  editor.value = createEditor({
    selector: '#editor-container',
    html: props.modelValue || '<p><br></p>',
    config: editorConfig,
    mode: 'default'
  })

  const toolbarConfig = {
    toolbarKeys: [
      'headerSelect',
      'blockquote',
      '|',
      'bold',
      'underline',
      'italic',
      'clearStyle',
      '|',
      'color',
      'bgColor',
      '|',
      'fontSize',
      'lineHeight',
      '|',
      'bulletedList',
      'numberedList',
      '|',
      'justifyLeft',
      'justifyRight',
      'justifyCenter',
      'justifyJustify',
      '|',
      'insertLink',
      'uploadImage',
      'uploadVideo',
      '|',
      'insertTable',
      'divider'
    ]
  }

  const toolbar = createToolbar({
    editor: editor.value,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default' // or 'simple'
  })

  console.log('toolbar', toolbar.getConfig())
})

onBeforeUnmount(() => {
  if (editor.value) {
    editor.value.destroy()
  }
})

// 监听父组件传入的内容变化
watch(
  () => props.modelValue,
  val => {
    if (editor.value && val !== editor.value.getHtml()) {
      editor.value.setHtml(val || '<p><br></p>')
    }
  }
)
</script>

<style>
.editor-container {
  border: 1px solid #ccc;
  z-index: 100;
  height: 400px; /* 固定高度 */
  width: 100%; /* 设置宽度为100% */
}

#editor-container {
  height: 300px; /* 编辑器内容区域高度 */
  overflow-y: auto;
}

/* 自定义视频样式 */
.w-e-text-container video {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 4px;
  outline: none;
}

/* 自定义图片样式 */
.w-e-text-container img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 4px;
}
</style>
